<template>
<div class="news-feed">
  <div class="profile-box">
    <div class="profile-search">
      <i class="el-icon-search" style="color: #628196;font-weight: bold"></i>
      <el-input :placeholder="$t('Search')" v-model="searchParams.inputValue"></el-input>
      <div class="num-box">{{ profileShowList.length }}</div>
    </div>
    <div class="profile-list">
      <div
          v-for="item in profileShowList"
          :key="item.id"
          @click="handleCheckedProfile(item)"
          :class="['profile-item', item.id === checkedProfile.id ? 'active' : '']">
          <div class="profile-item-avatar">
            <img class="photo" :src="item.photo" alt="">
            <div :class="['profile-status', item.online ? 'online' : 'offline']"></div>
          </div>
          <div class="profile-info" style="margin-left: 5px">
            <div class="profile-item-name">{{item.name}}</div>
          </div>
      </div>
    </div>
  </div>
  <div class="news-feed-content">
    <div class="news-feed-content-header">
      <div class="tab-list">
        <div
            @click="handleChangeTab(item.id)"
            :class="['tab', tabActive === item.id ? 'active' : '']" v-for="item in tabList" :key="item.id">
          {{ item.name }}
        </div>
      </div>
      <div class="header1">
        <span>{{ $t("APPROVED")}}</span>
        <el-button type="primary" icon="el-icon-plus" @click="handleOpenApprovedDialog">
          {{ $t("Add")}}
        </el-button>
      </div>
      <div class="header1">
        <span>{{ $t("Sent")}}</span>
      </div>
    </div>
    <div class="news-feed-body">
      <div class="news-feed-wrapper">
        <div class="news-feed-item" v-for="item in moderationList" :key="item.id">
          <div class="news-feed-item-header">
            <div class="news-feed-item-avatar">
              <img class="photo" :src="checkedProfile.photo" alt="">
              <div :class="['profile-status', item.online ? 'online' : 'offline']"></div>
            </div>
            <div class="profile-item-name">{{checkedProfile.name}}</div>
            <div class="profile-item-date">{{item.dateCreated | formatDate }}</div>
          </div>
          <div class="news-feed-item-text">{{ item.content.text }}</div>
          <div class="media-list">
            <el-image :preview-src-list="[mediaItem.urlStandart]" v-for="mediaItem in item.content.media" :key="mediaItem.id" class="media-image" :src="mediaItem.urlStandart" alt="" />
          </div>
        </div>
      </div>
      <div class="news-feed-wrapper">
        <div class="news-feed-item" v-for="item in approvedList" :key="item.id">
          <div class="news-feed-item-header">
            <div class="news-feed-item-avatar">
              <img class="photo" :src="checkedProfile.photo" alt="">
              <div :class="['profile-status', item.online ? 'online' : 'offline']"></div>
            </div>
            <div class="profile-item-name">{{checkedProfile.name}}</div>
            <div class="profile-item-date">{{item.dateCreated | formatDate }}</div>
          </div>
          <div class="news-feed-item-text">{{ item.content.text }}</div>
          <div class="media-list">
            <el-image :preview-src-list="[mediaItem.urlStandart]" v-for="mediaItem in item.content.media" :key="mediaItem.id" class="media-image" :src="mediaItem.urlStandart" alt="" />
          </div>
          <div class="button" @click="handlePublish(item)">{{ $t('Publish')}}</div>
        </div>
      </div>
      <div class="news-feed-wrapper">
        <div class="news-feed-item" v-for="item in sentList" :key="item.id">
          <div class="news-feed-item-header">
            <div class="news-feed-item-avatar">
              <img class="photo" :src="checkedProfile.photo" alt="">
              <div :class="['profile-status', item.online ? 'online' : 'offline']"></div>
            </div>
            <div class="profile-item-name">{{checkedProfile.name}}</div>
            <div class="profile-item-date">{{item.dateCreated | formatDate}}</div>
          </div>
          <div class="news-feed-item-text">{{ item.content.text }}</div>
          <div class="media-list">
            <el-image :preview-src-list="[mediaItem.urlStandart]" v-for="mediaItem in item.content.media" :key="mediaItem.id" class="media-image" :src="mediaItem.urlStandart" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
      top="10vh"
      class="approved-dialog"
      :visible.sync="approvedDialog"
      width="65vw">
    <div class="approved-dialog-body">
      <div class="approved-dialog-body-right">
        <div class="footer-input-wrapper">
          <div class="picker-stick-list">
            <el-popover
                popper-class="message-emojis-popover"
                placement="bottom">
              <div class="message-emojis-list">
                <div class="emojis-item"
                     @click="approvedForm.message+=emojisItem.emoji"
                     v-for="emojisItem in emojisList">{{ emojisItem.emoji }}</div>
              </div>
              <div class="emoji-icon" slot="reference">
                <img class="img emoji-popup svg-icon height_30px" src="~@/assets/emoji.svg" alt="">
                <img class="img_hover emoji-popup svg-icon height_30px" src="~@/assets/emoji_active.svg" alt="">
              </div>
            </el-popover>
          </div>
          <el-input class="chat-input"
                    type="textarea"
                    :rows="20"
                    v-model="approvedForm.message"
                    show-word-limit
                    maxlength="1500"
                    placeholder="Symbols"></el-input>
        </div>
      </div>
      <div class="approved-dialog-body-bottom">
        <div class="attach-file-btn" @click="handleOpenFileDialog">
          {{ fileText }}
        </div>
        <div
            @click="handleSave"
            :class="['send-mail-btn', approvedForm.message.trim().length ? '' : 'disabled']">{{ $t('Send to Moderation') }}</div>
      </div>
    </div>
  </el-dialog>

  <el-dialog
      top="10vh"
      class="file-dialog"
      :visible.sync="fileDialog"
      width="70%">
    <div class="dialog-header">
      <div class="dialog-header-left">
        <div class="profile-info">
          <img :src="checkedProfile.photo" alt="">
          <div class="profile-name">{{ checkedProfile.name }}</div>
        </div>
        <div class="profile-name">Media Gallery</div>
      </div>
      <div class="dialog-header-right">
        <div class="box">
          <img src="~@/assets/help_light_blue.svg" class="svg-icon height_24px" alt="">
        </div>
<!--        <div class="box" @click="handleMarkSendMail" style="width: min(calc(144 / 14 * 1rem),7.5vw)">-->
<!--          Mark as Send-->
<!--        </div>-->
        <div class="dialog-send-btn" @click="handleAttachedFile">
          Attached {{ checkedFileNum }}
        </div>
      </div>
    </div>
    <el-tabs class="file-tab" v-model="fileTabActive">
      <el-tab-pane label="" name="Photo">
          <span slot="label" class="file-tab-pane">
            <img class="svg-icon height_17px" src="~@/assets/image_tab.svg" alt="">
            <span class="file-tab-name">{{$t('Photo')}} {{ fileList.photo.length}}</span>
          </span>
        <div class="file-tab-content photo">
          <div :class="['file-media-item', item.checked ? 'checked' : '']" v-for="(item,index) in fileList.photo" :key="item.id">
            <el-image
                fit="cover"
                style="border-radius: min(calc(12 / 14 * 1rem),0.625vw)"
                @click="handleCheckedImage('photo', item)"
                :src="item.urlThumbnail">
            </el-image>
            <div class="preview-btn" @click="openViewer(index)">
              {{ $t("preview") }}
            </div>
            <img src="~@/assets/selected_media.svg" alt="" class="svg-icon height_30px selected-media">
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <image-viewer :z-index="999999" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
</div>
</template>
<script>
import {defineComponent} from 'vue'
import { formatTime } from "@/utils";
import axios from "axios";
import ImageViewer from 'element-ui/packages/image/src/image-viewer.vue'

export default defineComponent({
  name: "index",
  components: {
    ImageViewer
  },
  filters: {
    formatDate: formatTime
  },
  data() {
    return {
      searchParams: {
        inputValue: ''
      },
      profileList: [],
      checkedProfile: {},
      tabList: [
        {
          id: 'ON_MODERATION',
          name: this.$t('On Moderation')
        },
        {
          id: 'DECLINED',
          name: this.$t('DECLINED')
        },
      ],
      tabActive: 'ON_MODERATION',
      moderationList: [],
      approvedList: [],
      sentList: [],
      emojisList: [],
      approvedDialog: false,
      approvedForm: {
        message: ''
      },
      fileDialog: false,
      fileTabActive: 'Photo',
      fileList: {
        photo: []
      },
      showViewer: false,
      initalIndex: 0,
      previewSrcList: [],
    }
  },
  computed: {
    profileShowList() {
      return this.profileList.filter(item => {
        return item.name && item.name.includes(this.searchParams.inputValue)
      })
    },
    checkedFile() {
      // 优化 选中的文件数量
      const keys = ['photo']
      return this.getCheckedFileList(keys)
    },
    checkedFileNum() {
      return this.checkedFile.length
    },
    // 邮件状态下打开文件弹窗按钮文本
    fileText() {
      if (this.checkedFileNum) {
        return `File (${this.checkedFileNum})`
      } else {
        return 'Attach File'
      }
    }
  },
  mounted() {
    axios.get('/emojis.json').then(res => {
      this.emojisList = res.data
    })
    this.getProfileList()
  },
  methods: {
    // 获取配置
    getProfileList() {
      this.$http.getProfileList().then(res => {
        this.profileList = res
      })
    },
    // 选中账号
    handleCheckedProfile(item) {
      this.checkedProfile = item
      this.getNewsFeedList()
    },
    getNewsFeedList() {
      this.$http.getNewsFeed({
        "profileId": this.checkedProfile.profile_id,
        "status": "ON_MODERATION",
        "idLast": 0
      }).then(res => {
        this.moderationList = res
      })
      this.$http.getNewsFeed({
        "profileId": this.checkedProfile.profile_id,
        "status": "APPROVED",
        "idLast": 0
      }).then(res => {
        this.approvedList =res
      })
      this.$http.getNewsFeed({
        "profileId": this.checkedProfile.profile_id,
        "status": "SENT",
        "idLast": 0
      }).then(res => {
        this.sentList = res
      })
    },
    handleChangeTab(id) {
      this.tabActive = id
      this.$http.getNewsFeed({
        "profileId": this.checkedProfile.profile_id,
        "status": id,
        "idLast": 0
      }).then(res => {
        this.moderationList = res
      })
    },
    /**
     * 添加approveed
     */
    handleOpenApprovedDialog() {
      this.approvedForm = {
        message: ''
      }
        this.approvedDialog = true
    },
    // 打开文件选择
    handleOpenFileDialog() {
      this.fileDialog = true
      this.$http.getProfileMedia({
        profileId: this.checkedProfile.profile_id,
        customerId: this.customerId,
        mediaType: this.enumType.PHOTO,
        cursor: "",
        includeModerated: false,
        viewMediaContext: "DIALOG",
      }).then(res => {
        this.fileList.photo = res.media.map(el => {
          return {
            ...el,
            checked: !!this.checkedFile.find(item => item.id === el.id)
          }
        })
      })
    },
    handleCheckedImage(key, item) {
      item.checked = !item.checked
    },
    openViewer(index) {
      this.initalIndex = index
      this.previewSrcList = this.fileList[this.fileTabActive.toLowerCase()].map(el => el.url)
      this.showViewer = true
    },
    openViewerForMailContent(index, item) {
      this.initalIndex = index
      this.previewSrcList = item.attachments.images.map(el => el.url)
      this.showViewer = true
    },
    closeViewer() {
      this.showViewer = false
    },
    getCheckedFileList(keys, fileList = this.fileList) {
      let list = []
      keys.forEach(key => {
        list = [...list, ...fileList[key].filter(el => el.checked)]
      })
      return list
    },
    // 选择文件
    handleAttachedFile() {
      this.fileDialog = false
    },
    handleSave() {
      if (!this.approvedForm.message.trim()) return
      // 新增
      this.$http.addNewsFeed({
        info: {
          profileId: this.checkedProfile.profile_id,
          message: this.approvedForm.message,
          imageIds: [...this.checkedFile.map(el => el.id)],
        }
      }).then(res => {
        this.$message.success(this.$t('Success'))
        this.approvedDialog = false
        this.getNewsFeedList()
      })
    },
    handlePublish(item) {
      this.$http.publishNewsFeed({
        "profileId": this.checkedProfile.profile_id,
        "newsfeed_id": item.id,
        "type": "PHOTO"
      }).then(res => {
        console.log(res)
        this.$message.success(this.$t('Success'))
        this.getNewsFeedList()
      })
    }
  }
})
</script>

<style lang="scss">
.news-feed {
  display: grid;
  grid-template-columns: min(25rem,calc(350 / (1920 / 100) * 1vw)) auto;
  gap: 0.714rem;
  width: 100%;
  height: 100%;
  padding-top: 0.571rem;
  overflow: hidden;
  font-family: Inter,sans-serif;
  .file-dialog {

    .el-dialog {
      .dialog-header {
        display: flex;
        justify-content: space-between;
        .dialog-send-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
          cursor: pointer;
          border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          outline: 1px solid #3C6382;
          letter-spacing: .01rem;
          width: min(calc(121 / 14 * 1rem),calc(121 / (1920 / 100) * 1vw));
          background-color: #2c5361;
          &:hover {
            background-color: #2c485f;
            transition-duration: .3s;
          }
        }
        .dialog-header-right {
          display: flex;
          align-items: center;
          gap: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          .box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
            height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
            cursor: pointer;
            border-radius: 0.571rem;
            background-color: #122a3a;
            outline: 1px solid #2B4353;
            color: #d5d5d5;
            font-family: Inter,sans-serif;
            font-size: min(1.286rem, 0.938vw);
            &:hover {
              background-color: #2c485f;
              transition-duration: .3s;
            }
          }
        }
        .dialog-header-left {
          display: flex;
          gap: min(calc(48 / 14 * 1rem),2.5vw);
          align-items: center;
          height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
        }
        .profile-info {
          display: flex;
          gap: min(calc(13 / 14 * 1rem),calc(13 / (1920 / 100) * 1vw));
          align-items: center;
          letter-spacing: .01em;
          img {
            width: min(2.5rem,calc(35 / (1920 / 100) * 1vw));
            height: min(2.5rem,calc(35 / (1920 / 100) * 1vw));
            border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          }
        }
        .profile-name {
          color: #f1f1f1;
          max-width: min(calc(300 / 14 * 1rem),15.625vw);
          overflow: hidden;
          font-size: min(calc(12 / 14 * 1rem),calc(12 / (900 / 100) * 1vh));
          font-weight: 700;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

      }
    }
    .file-tab {
      .file-tab-content {
        height: 65vh;
        overflow-y: auto;
        padding-right: min(1rem,calc(14 / (1920 / 100) * 1vw));
        display: grid;
        grid-gap: min(calc(6 / 14 * 1rem),0.3125vw);
        align-content: flex-start;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill,min(calc(90 / 14 * 1rem),4.6875vw));
        width: 100%;
        overflow: initial;
        overflow: auto;
        .file-media-item {
          position: relative;
          display: flex;
          width: min(calc(90 / 14 * 1rem),4.6875vw);
          cursor: pointer;
          border-radius: min(calc(12 / 14 * 1rem),0.625vw);
          aspect-ratio: 2/3;
          .preview-btn {
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
            cursor: pointer;
            border-radius: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
            color: #67cae8;
            font-size: min(calc(12 / 14 * 1rem),.625vw);
            font-weight: 600;
            letter-spacing: .01rem;
            text-align: center;
            line-height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
            background: rgba(14,34,46,.88);
          }
          .selected-media {
            position: absolute;
            top: 0;
            right: -5%;
            display: none;
          }
          .video_play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }
          &:hover {
            .preview-btn {
              display: block;
              transition: .2s ease-in-out;
            }
          }
          &.checked {
            .el-image {
              opacity: .3;
            }
            .selected-media {
              display: initial;
            }
          }
        }
      }
      .file-tab-content.sent {
        display: flex;
        flex-direction: column;
        gap: min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh));
        padding-right: min(1rem,calc(14 / (1920 / 100) * 1vw));
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        justify-content: initial;
        .mediaType {
          color: #f1f1f1;
          font-size: min(calc(16 / 14 * 1rem),calc(16 / (900 / 100) * 1vh));
          letter-spacing: .01rem;
        }
      }
      .el-tabs__nav-wrap::after {
        background-color: #314F67;

      }
      .el-tabs__active-bar {
        background-color: #94f4ff;
      }
      .file-tab-pane {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        img {
          height: min(calc(17 / 14 * 1rem),calc(17 / (900 / 100) * 1vh));
        }
        .file-tab-name {
          margin-left: 0.8rem;
          color: #d5d5d5;
          font-family: Manrope,sans-serif;
          font-size: 1rem;
          font-weight: 400;
          font-style: normal;
          line-height: 150%;
        }
      }
    }
  }

  .approved-dialog {
    padding: 2.5vh;
    .el-dialog {
      overflow: hidden;
    }
    .chat-message-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 10%;
      max-width: 75%;
      margin: min(0.5rem,0.365vw) min(0.429rem,0.313vw);
      &.customer {
        align-self: flex-start !important;
      }
      &.profile {
        align-self: flex-end !important;
        .message-wrapper {
          flex-direction: row-reverse;
        }
        .message-right {
          .message-content {
            align-self: flex-end;
          }
          .message-time {
            margin-left: auto;
          }
        }
      }
      .message-wrapper{
        display: flex;
        gap: min(0.571rem,0.417vw);
        .avatar-box {
          display: flex;
          flex-direction: column;
          gap: 0.571rem;
          .el-image{
            align-self: start;
            width: 2.714rem;
            height: 2.714rem;
            border-radius: 0.571rem;
          }
          .mail-message-time {
            width: 2.714rem;
            color: #d5d5d5;
            font-size: .786rem;
            font-weight: 500;
            line-height: 100%;
          }
        }
      }
      .mail-right {
        justify-content: center;
        box-sizing: border-box;
        width: 100%;
        height: -moz-fit-content;
        height: fit-content;
        padding: 1.143rem;
        border-radius: 1.143rem 0.214rem 1.143rem 1.143rem;
        outline: 1px solid rgba(148,244,255,.2);
        background-color: #ffffff14;
        color: #c1c1c1;
        font-family: Inter,sans-serif;
        font-size: 1.071rem;
        font-weight: 400;
        font-style: normal;
        line-height: 150%;
        text-align: justify;
        .mail-name {
          font-family: Manrope,sans-serif;
          font-size: 1.071rem;
          font-weight: 700;
        }
        .mail-content {
          text-align: justify;
          word-break: break-all;
          margin-bottom: 5px;
        }
        .mail-file-total {
          display: inline;
          border-radius: 0.571rem;
          background-color: #2b4353;
          color: #7be6fb;
          font-size: .714rem;
          padding: 4px 5px;
          margin: 5px 0;
          cursor: pointer;
        }
        .mail-file-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 0.5rem;
          .photo,
          .video{
            display: inline-block;
            width: 7.14rem;
            height: 7.14rem;
            margin-right: 0.5rem;
            border-radius: 0.36rem;
            position: relative;

            .preview-btn {
              display: none;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
              cursor: pointer;
              border-radius: min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(4 / 14 * 1rem),calc(4 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw)) min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
              color: #67cae8;
              font-size: min(calc(12 / 14 * 1rem),.625vw);
              font-weight: 600;
              letter-spacing: .01rem;
              text-align: center;
              line-height: min(calc(22 / 14 * 1rem),calc(22 / (1920 / 100) * 1vw));
              background: rgba(14,34,46,.88);
            }
            .video_play {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
            &:hover {
              .preview-btn {
                display: block;
                transition: .2s ease-in-out;
              }
            }
          }
        }
      }
      .message-right {
        display: flex;
        flex-direction: column;
        gap: 0.286rem;
        color: #d5d5d5;
        .message-content {
          width: fit-content;
          line-height: 150%;
          text-align: justify;
          word-break: break-word;
          .photo-batch {
            display: flex;
            flex-flow: row wrap;
            gap: 0.5rem;
            justify-content: flex-end;
            background: 0;
          }
          .text-message,
          .like-wrapper,
          .newsfeed-like,
          .wink,
          .sticker,
          .virtual-gift,
          .post {
            padding: 1rem;
            border-radius: 1.143rem 1.143rem 1.143rem 0.214rem;
            background: rgba(255,255,255,.08);
            font-size: 1.071rem;
          }
          .sticker img {
            max-width: 4.86rem;
            max-height: 4.86rem;
          }
        }
        .message-time {
          opacity: .5;
          font-size: .786rem;
        }
      }

    }

    .approved-dialog-body {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.714rem;
      overflow: hidden;
      .approved-dialog-body-left {
        height: 100%;
        border-radius: 1.07rem;
        background: linear-gradient(#0E222E,#102535);
        position: relative;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column-reverse;
      }
      .approved-dialog-body-right {
        border-radius: 1.07rem;
        background: linear-gradient(#0E222E,#102535);
        position: relative;
        display: flex;
      }
      .approved-dialog-body-bottom {
        display: flex;
        grid-column: 2/span2;
        grid-gap: 1rem;
        margin-right: 0.65rem;
        line-height: 150%;
        justify-self: end;
        .attach-file-btn {
          background: #122A3A;
          box-sizing: border-box;
          padding: 1.2vh 1.3vw;
          cursor: pointer;
          border: 0;
          border-radius: 0.571rem;
          color: #dfdfdf;
          font-size: 1rem;
          font-weight: 600;
          &:hover {
            background: #2c485f;
          }
        }
        .send-mail-btn {
          box-sizing: border-box;
          padding: 1.2vh 1.3vw;
          cursor: pointer;
          border: 0;
          border-radius: 0.571rem;
          color: #dfdfdf;
          font-size: 1rem;
          font-weight: 600;
          background: linear-gradient(0deg,#0E222E,#0E222E),#94F4FF;
          &.disabled {
            cursor: default;
            border-color: #354552;
            background: linear-gradient(0deg,#354552,#354552),#94F4FF;
            color: #848383d4;
          }
          // hover 不包含className为disabled
          &:hover:not(.disabled) {
            background: #2c485f;
          }
        }
      }
    }

    .footer-input-wrapper {
      display: flex;
      flex: 1 0 75%;
      gap: min(0.214rem,0.156vw);
      padding: min(0.714rem,0.521vw);
      .chat-input {
        .el-textarea__inner {
          height: 100%;
          background: transparent;
          border: none;
          color: #ffffff;
          font-size: 1.071rem;
          line-height: 150%;
          text-align: justify;
          line-break: anywhere;
          font-family: Manrope,sans-serif;
          padding: 0 !important;
          padding-left: 5px !important;
        }
        .el-input__count {
          left: 10px;
          right: initial;
          background: transparent;
          opacity: .2;
          color: #fff;
          font-family: Manrope,sans-serif;
          font-size: min(.714rem,.521vw);
          font-weight: 300;
        }
        .el-textarea__inner::placeholder {
          color: #6c757d;
          opacity: .75;
        }
      }
      .picker-stick-list {
        display: flex;
        flex: 0 0 min(2.143rem,1.563vw);
        flex-direction: column;
        gap: min(0.714rem,0.521vw);
      }
    }
    .emoji-icon {
      .img_hover {
        display: none;
      }
      .img {
        display: block;
      }
      &:hover {
        .img_hover {
          display: block;
        }
        .img {
          display: none;
        }
      }
    }
  }
  .news-feed-content {
    display: flex;
    flex-direction: column;
    gap: 0.714rem;
    padding: 0.571rem;
    overflow-y: auto;
    border-radius: 1.143rem;
    background-color: #122a3a;
    .news-feed-body {
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 0.857rem;
      .news-feed-wrapper {
        width: 100%;
        height: 100%;
        padding: 0.714rem;
        border-radius: 1.143rem;
        background: #0E222E;
        color: #fdfdfd80;
        display: flex;
        flex-direction: column;
        gap: 0.714rem;
        height: 100%;
        padding-right: 0.714rem;
        overflow-y: auto;
        border-radius: 0.571rem;
        .news-feed-item {
          padding: 0.571rem;
          border-radius: 0.571rem;
          background: #1A384B;
          .button {
            width: 100%;
            height: 2.857rem;
            line-height: 2.857rem;
            cursor: pointer;
            border-radius: 0.571rem;
            outline: 1px solid #3C6382;
            outline-offset: -1px;
            color: #97bad1;
            font-weight: 600;
            text-align: center;
            &:hover {
              background: rgba(60, 99, 130, .24);
              color: #80d1f4;
            }
          }
          .news-feed-item-header {
            display: flex;
            gap: 0.571rem;
            align-items: center;
          }
          .news-feed-item-avatar {
            position: relative;
            .photo {
              width: min(1.71429rem, 1.25vw);
              height: min(1.71429rem, 1.25vw);
              border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
              object-fit: cover;
            }
            .profile-status {
              position: absolute;
              right: 0;
              bottom: 1px;
              width: 1rem;
              height: 1rem;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              background: #0E222E;
              box-shadow: inset 0 0.286rem 0.286rem #000;
            }
          }
          .profile-item-name {
            color: #fdfdfd;
            font-family: Manrope,sans-serif;
            font-size: min(calc(12 / 14 * 1rem),.625vw);
            font-weight: 700;
          }
          .profile-item-date {
            margin-left: auto;
            font-size: min(calc(11 / 14 * 1rem),calc(11 / (1920 / 100) * 1vw));
          }
          .news-feed-item-text {
            font-size: min(calc(13 / 14 * 1rem),calc(13 / (1920 / 100) * 1vw));
            line-height: 150%;
          }
          .media-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.571rem;
            .media-image {
              flex: 1 0 min(calc(100 / 14 * 1rem),calc(100 / (1920 / 100) * 1vw));
              border-radius: 0.357rem;
              height: min(calc(160 / 14 * 1rem),calc(160 / (1920 / 100) * 1vw));
            }
            img {
              object-fit: cover;
            }
          }

        }
      }
    }
    .news-feed-content-header {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 0.857rem;
      height: 4rem;
      .header1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.286rem 0.571rem;
        color: #97bad1;
        font-size: min(calc(18 / 14 * 1rem),.9375vw);
        font-weight: 700;
      }
      .tab-list {
        display: flex;
        padding: 0.571rem;
        border-radius: 0.857rem;
        background: #0E222E;
        font-weight: 700;
        .tab {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          cursor: pointer;
          color: #628196;
          font-size: min(calc(16 / 14 * 1rem),calc(16 / (1920 / 100) * 1vw));
          &.active {
            border-radius: 0.857rem;
            background: #1A384B;
            color: #bdeaff;
          }
        }
      }
      .header2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.286rem 0.571rem;
        color: #97bad1;
        font-size: min(calc(18 / 14 * 1rem),.9375vw);
        font-weight: 700;
      }
    }
  }
  .profile-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.857rem;
    height: 100%;
    padding: 0.571rem;
    overflow: hidden;
    border-radius: 0.857rem;
    background-color: #122a3a;
    .profile-search {
      display: flex;
      align-items: center;
      padding-right: 1rem;
      border-radius: 0.571rem;
      background-color: #0e222e;
      .el-input__inner {
        border: none;
        &:focus {
          border: none;
        }
      }

      .num-box {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.429rem 0.714rem;
        opacity: .8;
        border-radius: 0.429rem;
        background-color: #0a3d62;
        color: #fff;
        font-size: .857rem;
      }
    }
    .profile-list {
      display: flex;
      flex-direction: column;
      gap: 0.286rem;
      height: 100%;
      padding: 0.429rem min(calc(10 / 14 * 1rem),calc(10 / (1920 / 100) * 1vw)) 0 0;
      overflow-x: hidden;
      overflow-y: auto;
      .profile-item {
        display: flex;
        gap: 0.286rem;
        align-items: center;
        width: 100%;
        min-height: 4rem;
        padding: 0.571rem 1.143rem 0.571rem 0.571rem;
        cursor: pointer;
        border-radius: 0.571rem;
        outline: 1px solid #3C6382;
        outline-offset: -1px;
        background: #122A3A;
        color: #dfdfdf;
        font-size: min(calc(13 / 14 * 1rem),calc(13 / (1920 / 100) * 1vw));
        .photo {
          width: min(3.42857rem, 2.5vw);
          height: min(3.42857rem, 2.5vw);
          border-radius: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw));
          object-fit: cover;
        }
        &.active {
          background-color: #1d3b4e;
          .profile-item-name {
            color: #80d1f4;
          }
        }
      }
      .profile-item-avatar {
        position: relative;
        .profile-status {
          position: absolute;
          right: 0;
          bottom: 1px;
          width: 1rem;
          height: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: #0E222E;
          box-shadow: inset 0 0.286rem 0.286rem #000;
        }
      }
    }
  }
}
</style>
